<template>
  <div>
    <h2>发表评论</h2>
    <textarea placeholder="请输入要BB的内容,最多BB...120个字" v-model="commentCont"></textarea>
    <mt-button type="primary" size="large" @click="addComment">发表评论</mt-button>

    <div class v-for="(item, index) in commentList" :key="index">
      <p>
        第{{index+1}}楼
        <span class="mui-badge mui-badge-primary">{{item.user_name}}</span>
      </p>
      {{item.content=="undefined" ? '这货啥都没评论':item.content}}
      <p>发表时间:{{item.add_time | dateFormat}}</p>

      <hr>
    </div>
    <button @click="getMore" class="mint-button mint-button--danger mint-button--large is-plain">
      <!---->
      <label class="mint-button-text">加载更多</label>
    </button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      pageindex: 1,
      commentList: [],
      id: this.$route.params.id,
      commentCont: ""
    };
  },
  created() {
    this.getComment();
  },
  methods: {
    getComment() {
      this.$http
        .get("api/getcomments/" + this.newsId + "?pageindex=" + this.pageindex)
        .then(result => {
          // console.log(result.body.message);
          this.commentList = this.commentList.concat(result.body.message);
        });
    },
    getMore() {
      this.pageindex = this.pageindex + 1;
      this.getComment();
    },
    addComment() {
      if (this.commentCont == "") return Toast("内容不要为空");
      this.$http
        .post("api/postcomment/" + this.id, {
          user_name: "懒洋洋",
          content: this.commentCont,
          add_time: Date.now()
        })
        .then(result => {
          if (result.body.status == 0) {
            this.getComment();
            this.commentCont = "";
            return Toast("评论成功");
          } else {
            return Toast("添加评论失败");
          }
        });
    }
  },
  props: ["newsId"]
};
</script>

<style scoped>
h2 {
  font-size: 18px;
  color: rgb(46, 45, 44);
}
.mint-button {
  margin-bottom: 10px;
}
</style>
